Skip to content

小程序-02 模板、组件

一、渲染

  1. 使用if/elif/else进行判断语句
html
<view wx:if="{{条件}}"> WEBVIEW </view>
<view wx:elif="{{条件}}"> APP </view>
<view wx:else> MINA </view>
data: view: 'MINA'
  1. 使用wx:for进行渲染模块,值可以是变量,也可以是数组
html
<view wx:for='{{arr}}' wx:key='{{index}}'>{{item}}</view>
<view wx:for='{{[1,2,3]}}'>
  1. 可以使用block标签进行渲染模板,block标签是一个特殊的标签,不会出现在页面上,最多的是做列表渲染,当然也可以直接使用渲染标签;

block不是一个组件,仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性;

html
<block wx:for=''>
    <view></view>
</block>
  1. index和item是固定的,如果需要修改可以使用wx:for-item='itm'和wx:for-index='x';

九九乘法表案例:

html
<view wx:for='{{list}}' wx:key='{{index}}' wx:for-item="x" class="lists">
    <text wx:for='{{list}}' wx:key='{{index}}' wx:for-item='y' wx:if='{{x>=y}}'>{{y}}*{{x}}={{x*y}}</text>
</view>

二、模板

  1. 相当于一个组件,定义name作为模板的名称,使用时用is来指定显示哪一个模板;

在小程序里,如果标签中没有内容,可以直接使用闭合标签;

html
<template name='tem'>
    <view>这是模板内容</view>
</template>
<template is='header'/>
  1. 引用模板

(1)使用import标签来引入;引入之后直接使用is,is等于引用进来的模板文件里定义的name名;引入可以不带后缀

html
<import src='../' />
<template is='' />   // 可以复制多个;

(2)使用include引用,会直接显示文件里除template标签外的内容。

html
<include src='../' />

import和include的区别:

  • import 可以引入模板template的内容
  • include在没有定义模板时使用,显示除template标签外的内容

也可以两个全部引入;

  1. 模板传值

在引入的标签上绑定data属性,在模板可以直接使用data绑定的属性变量,如果是对象,需要使用...扩展运算符;

html
<template src='' data='{{title}}'/>
<template src='' data='{{...obj}}' />

如果是include可以直接使用父组件的变量,不需要通过data绑定数据传值;

  1. 模板作用域 C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template。

三、常用组件

  1. scroll-view:滚动视图组件,需要设置一个固定的高度,并允许某个方向滚动,属性:
  • scroll-x/y 开启横/竖向滚动;
  • scroll-top/left 设置滚动条初始位置,参数为数字;
  • enable-back-to-top ios点击顶部状态栏/安卓双击标题回到顶部;
  • bindscroll 滚动时触发的函数
  • scroll-into-view 滚动到设置的id位置;
  1. swiper: 轮播图组件,直接子元素旋转swiper-item组件;
  • indicator-dots 显示面板指示点 .wx-swiper-dots.wx-swiper-dots-horizontal可以选中指示点;
  • autoplay 自动切换
  • interval 自动切换时间间隔
  • circular 开启循环滚动,会加一张图;
  • vertical 开启纵向轮播图;
  1. icon图标
  • type 指定显示的类型,只能是 success, success_no_circle, info, warn, waiting, cancel, download, search, clear
  • size icon的大小,使用数字单位,默认23;
  • color icon的颜色;
  1. progress 进度条;
  • percent 百分比进度,数字单位;
  • show-info 在进度条右侧显示百分比数字;
  • border-radius 圆角大小
  • activeColor 已选择进度条颜色
  • backgroundColor 未选择进度条颜色
  1. button:按钮组件
  • size:default / mini 两种尺寸
  • type: default / primary / warn 修改按钮的颜色
  • plain: true 按钮透明背景
  • disabled:禁用
  • loading:带loading图标的按钮;
  • form-type:submit / reset 在form表单时,触发提交功能;
  • hover-class:按下去的样式;

(1)open-type:微信开放 能力

  • contact: 打开客服会话,可以绑定bindcontact(e)获取具体信息;
  • getPhoneNumber: 获取用户手机号,绑定bindgetphonenumber获取信息;
  • getUserInfo: 获取用户信息,绑定bindgetuserinfo获取信息;
  • feedback:意见反馈页面,用户可以获取信息;
  1. image: 图片组件
  • src: 图片资源地址;
  • lazy-load: 图片懒加载,布尔值;

(1)mode: 图片裁剪、缩放模式

  • aspectFit: 缩放模式,保持纵横缩放比,可以将图片完整的显示出来;(常用)
  • scaleToFill: 不保持纵横缩放图片,使图片完全适应;
  • aspectFill: 保持纵横缩放比,只保证图片短边能完全显示;

四、表单组件

  1. form:表单控件;

    需要给button添加form-type属性,提交表单需要添加name属性来作为key,在表单上添加value属性来作为值;

  • bindsubmit: 触发提交事件;

  • bindrestet: 触发reset事件;

  1. input: 输入框,默认没有边框;
  • password: 是否为密码框;
  • placeholder-style: 指定提示信息样式;
  • maxlength: 最大输入长度;
  • focus: 获取焦点;
  • adjust-position: 键盘弹起时,是否自动上推页面;
  • bindinput: 键盘输入时触发,相当于keyup;
  • bindfocus: 获取焦点;
  • bindblur:失去焦点
  • bindconfirm: 点击完成按钮触发;

(1)type:指定输入框类型

  • text:文本键盘
  • number:数字键盘
  • idcard:身份证输入键盘
  • digit:带小数点的键盘;

(2)confirm-type:设置键盘右下角的文字提示;

  • send:右下角按钮文字为发送
  • search /搜索、next /下一个、go /前往、done /完成;
  1. label:绑定id属性,可以将输入控件直接包裹;
  2. checkbox:复选框,多个复选框需要添加到checkbox-group,给group添加name属性,提交之后会获取到一个数组;
  3. radio: 单选框,多个使用radio-group包裹;
  4. slider: 滑动选择器;
  • min/max: 设置范围;
  • step: 步长;
  • value: 当前值,
  • show-value: 是否显示当前value;
  • bindchange: 完成拖动触发;
  • bindchanging: 拖动过程触发;
  1. switch: 开关选择器,返回一个布尔值;8. textarea:文本框,拥有大部分input属性;
  • auto-height: 自动增高,设置之后style.height失效;
  • fixed: 如果在position:fixed区域,则需要指定,否则不显示;
  1. picker 底部弹起的滚动选择器;
  • bindcancel: 取消选择时触发;
  • mode: 指定类型

(1)selector:普通选择器;

  • range: 指定一个数组,填写可选项;
  • value: 表示数组下标是第几个;
  • bindchange: value改变时触发;

(2)multiSelector:多列选择器;

  • range: 指定一个二维数组;
  • value: value也是一个数组,数组中的每一项代表一列的值;
  • bindcolumnchange:列改变时触发,返回信息会告知第几列,通过switch来进行判断,修改多列选择器的第二列数据;

(3)time:时间选择器;

  • vlaue: 选中的时间,格式:hh:mm
  • start / end: 限制时间;
  • bindchange: 改变时触发;

(4)date:日期选择器;

  • fields:限制选项,year/month/day;当选择month时,只有year和month;

(5)region:省市区选择器

Released under the MIT License.